@import "mixin_helpers";
@import "variables";

@mixin num-stats-color($color) {
  .number {
    color: $color;
  }

  i {
    background: $color;
    @include text-shadow-bottom(darken($color, 20));
  }

  strong {
    color: $color;
  }
}

.num-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #717e88;
  @include clearfix;


  li {
    text-align: center;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    border-right: 1px dotted #bbbbbb;
    border-left: 1px dotted whitesmoke;
    @include box-sizing(border-box);

    &:first-child {
      border-left: none;
    }

    &:last-child {
      border-right: none;
    }

    .number {
      text-shadow: 0 1px #fff;
      font-size: 18px;
      font-weight: 600;
      display: block;
      line-height: 18px;
    }

    i {
      color: #fff;
      @include border-radius(4px);
      height: 36px;
      width: 36px;
      line-height: 36px;
      font-size: 14px;
      float: left;
      @include box-shadow(0 1px 0 rgba(255,255,255,.6));
    }
  }

  @each $pair in $numeric-stats-colors {
    li.stat-#{nth($pair, 1)} {
      @include num-stats-color(nth($pair, 2));
    }
  }
}

.well .num-stats {
  li {
    border-right-color: #bbb;
    border-left-color: transparent;
  }
}

.area-top .num-stats {
  margin-top: 5px;

  li {
    border: none;
  }
}